<template>
  <qf-Table
    :tableData="tableData"
    :tableLoading="tableLoading"
    :columns="columns"
    align="center"
  >
    <!-- //头像显示 -->
    <template v-slot:imageUrl="{ row }">
      <!-- <el-avatar shape="square" :src="row.imageUrl"></el-avatar> -->
      <img :src="row.imageUrl" width="100" />
    </template>

    <template v-slot:action="{ row }">
      <!-- 自定义图标 -->
      <el-button type="success" @click="goPreOrder(row)">
        <template #icon>
          <i class="iconfont icon-vip1"></i>
        </template>
        <!-- 自定义语法 -->
        <template #default>点击充值</template>
      </el-button>
    </template>
  </qf-Table>
</template>
<script setup>
import qfTable from "@/components/qfTable/index.vue";
import { ElMessageBox, ElMessage } from "element-plus";
//引入发送请求的方法
import * as api from "@/api/pay";
import { ref } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();

//动态定义表头
let columns = [
  {
    label: "产品图片",
    prop: "imageUrl",
  },
  {
    label: "产品名称",
    prop: "productName",
  },
  {
    label: "产品描述",
    prop: "description",
  },
  {
    label: "产品价格",
    prop: "price",
  },
  {
    label: "库存",
    prop: "inventory",
  },
  {
    label: "充值",
    prop: "action",
  },
];

//声明一个数据,用于注入给表格
let tableData = ref([]);

//声明控制加载动画的变量
let tableLoading = ref(false);

//获取产品
let getList = async () => {
  tableLoading.value = true;
  try {
    let res = await api.getCategoryApi();
    // console.log(res)
    tableData.value = res.data.data.reverse();
    tableLoading.value = false;
  } catch (e) {
    console.log(e);
    tableLoading.value = false;
  }
};
getList();

//跳转到下单页面
let goPreOrder = (row) => {
  console.log(row);
  // 使用弹框提示用户,是否购买
  ElMessageBox.confirm(
    "您正在购买" + row.productName + ", 是否继续?",
    "购买提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      //2.用户点击了确认
      //直接获取当前产品的id,传递给下一个页面,然后跳转到预支付页面
      router.push({ path: "/preOrder", query: { product_id: row.product_id } });
    })
    .catch(() => {
      ElMessage({
        type: "warning",
        message: "已取消购买",
      });
    });
};
</script>
<script>
export default {
  meta: {
    title: "vipCharge",
    name: "vip充值",
    routeName: "vipCharge",
    icon: "icon-chongzhi",
  },
};
</script>
